<template>
  <div>
    <!--要把home页面和他的子页面分开，当展示子页面的时候不展示主页面就是把他们分两个模块-->
    <div v-if="$route.path == '/home'">
      <van-search
        v-model="SearchValue"
        shape="round"
        background="#fff"
        placeholder="请输入搜索关键词"
        disabled
        @click="goMyPopup"
      />
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="skybule">
        <van-swipe-item v-for="item in banner" :key="item.id"
          ><img :src="item.image_url" width="100%" style="display:block"
        /></van-swipe-item>
      </van-swipe>
      <van-grid :column-num="5">
        <van-grid-item
          v-for="item in channel"
          :key="item.id"
          :icon="item.icon_url"
          :text="item.name"
        />
      </van-grid>
      <div class="title">
        品牌制造商直供
      </div>
      <ul class="brand">
        <li v-for="item in brandList">
          <img :src="item.pic_url" alt="" />
          <h4>{{ item.name }}</h4>
          <div>{{ item.floor_price | filterMoney }}</div>
        </li>
      </ul>
    </div>

    <transition name="slide">
      <router-view v-if="$route.path == '/home/popup'"></router-view>
    </transition>
  </div>
</template>

<script>
import { GetHomeData } from "../request/api";
import axios from "axios";
export default {
  name: "Home",
  data() {
    return {
      SearchValue: "",
      //   轮播图数组
      banner: [],
      // 九宫格
      channel: [],
      // 品牌
      brandList: []
    };
  },
  created() {
    GetHomeData().then(res => {
      if (res.errno == 0) {
        console.log(res.data);
        let { banner, channel, brandList } = res.data;
        this.banner = banner;
        this.channel = channel;
        this.brandList = brandList;
        console.log(this.brandList);
      }
    });
  },
  components: {},
  methods: {
    goMyPopup() {
      //   $route是只读的，读取信息
      this.$router.push("/home/popup");
    }
  }
};
</script>
<style lang="less" scoped>
.slide-enter,
.slide-leave-to {
  right: -100%;
}
.slide-enter-active,
.slide-leave-active {
  transition: right 0.01s linear;
}
.slide-enter-to,
.slide-leave {
  right: 0;
}
.title {
  background: #fff;
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin-top: 20px;
}
.brand {
  background:#fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  li {
    width: 49%;
    position: relative;
    margin-bottom: 8px;
    img {
      width: 100%;
      display: block;
      // 调节亮度
      filter: brightness(1.0);
    }
    h4 {
      position: absolute;
      left: 10px;
      top: 0;
      line-height: 30px;
    }
    div {
      color: darkred;
      position: absolute;
      left: 10px;
      top: 20px;
      line-height: 40px;
    }
  }
}
</style>
